<template>
  <div class="order-list-wrap">
    <div class="order_table" v-loading="loadingFlag">
      <el-row class="table_head">
        <el-col class="head_cell" :span="8"> 商品信息 </el-col>
        <el-col class="head_cell" :span="2"> 订单总数 </el-col>
        <el-col class="head_cell" :span="2"> 订单总件数 </el-col>
        <el-col class="head_cell" :span="2"> 合同订单销售总价 </el-col>
        <el-col class="head_cell" :span="2"> 付款状态 </el-col>
        <el-col class="head_cell" :span="2"> 订单状态 </el-col>
        <el-col class="head_cell" :span="4"> 采购金额 </el-col>
        <el-col class="head_cell" :span="2"> 操作 </el-col>
      </el-row>
      <div class="table_body">
        <el-empty description="暂时还没有数据" v-if="!orderData.records?.length" />
        <div class="body_row" v-for="item in orderData.records" :key="item.orderId">
          <div class="row_title">
            <div class="title_text">
              <span>订单编号：{{ item.orderNo }}</span>
              <span v-if="item.orderType === 2">|</span>
              <span v-if="item.orderType === 2" style="color: #ff9900">后补订单编号：{{ item.appendOrderNo }}</span>
              <span>订单时间：{{ item.orderTime }}</span>
            </div>
            <div class="title_text">
              <span>关联客户：{{ item.customerName }}</span>
              <span>电话：{{ item.customerMobileCode }}</span>
              <span>{{ item.commodityNum }}种({{ item.detailNum }}件)</span>
            </div>
          </div>
          <el-row class="row_content">
            <el-col :span="8" class="row_cell has_corner">
              <div class="corner_tag" v-if="item.orderType === 2">新补材料：{{ item.productCategoryNum }}</div>
              <div class="goods_cell">
                <img class="cell_image" :src="item.mainPicUrl" />
                <div class="cell_product">
                  <div class="product_name">{{ item.productAliasName }}</div>
                  <div class="product_info">{{ item.skuSpecification }}</div>
                  <div class="product_info">SKU编码:{{ item.skuCode }}</div>
                  <div class="product_info">ID：{{ item.productId }}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="2" class="row_cell">{{ item.productNum }}</el-col>
            <el-col :span="2" class="row_cell">{{ item.productDetailNum }}</el-col>
            <el-col :span="2" class="row_cell"> ¥{{ item.productDetailPrice }} </el-col>
            <el-col :span="2" class="row_cell">
              <div :class="`pay-status pay-status__${item.payStatus}`">
                {{ dict.getDictName("shop_pay_status", item.payStatus) }}
              </div>
            </el-col>
            <el-col :span="2" class="row_cell">
              <div :class="`purchase-status purchase-status__${item.purchaseStatus}`">
                {{ dict.getDictName("shop_purchase_status", item.purchaseStatus) }}
              </div>
            </el-col>
            <el-col :span="4" class="row_cell">
              <div class="price_cell">
                <div>商品总价：¥{{ item.orderPrice }}</div>
                <div>应收金额：¥{{ item.actualPrice }}</div>
                <div>未收金额：¥{{ item.waitPayAmount }}</div>
                <div style="font-weight: 700">
                  <span style="color: #3d3d3d">实收金额：</span>
                  <span style="color: #ff3333">¥{{ item.payAmount }}</span>
                </div>
              </div>
            </el-col>
            <el-col :span="2" class="row_cell">
              <div class="operate_cell">
                <div>
                  <el-button type="primary" link size="small" @click="routeToDetail(item)">详情</el-button>
                </div>
              </div>
            </el-col>
          </el-row>
          <div class="row_footer">
            <div>
              收货信息：
              <span v-if="item.receivingName">{{ item.receivingName }} / </span>
              <span v-if="item.receivingMobile">{{ item.receivingMobile }} / </span>
              <span v-if="item.receivingAreaDetail || item.receivingAddress">
                {{ item.receivingAreaDetail }} {{ item.receivingAddress }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="order_page jzt-flex-end">
      <el-pagination
        class="jzt-pagination"
        v-model:current-page="searchObj.page"
        v-model:page-size="searchObj.size"
        background
        :page-sizes="[10, 20, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(orderData.total)"
        @change="getList(searchObj.page)"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { useElementSize } from "@vueuse/core";
import { ElMessage } from "element-plus";
import useManageStore from "@/store/modules/manage";
import { getOrderList } from "@/apis/manage/orderlist";
import useCodeArrStore from "@/store/modules/select";
const dict = useCodeArrStore();
import { useRouter } from "vue-router";
const router = useRouter();

const loadingFlag = ref(false);
const orderData = ref({ total: 0 });
const searchObj = ref({
  page: 1,
  size: 20,
  pureProcurementOrder: 1
});

onMounted(() => {
  getList();
});

const getList = async () => {
  loadingFlag.value = true;
  const { data } = await getOrderList(searchObj.value);
  orderData.value = data;
  loadingFlag.value = false;
  useManageStore().orderlistTotal = data.total;
};

const routeToDetail = row => {
  console.log("跳转到详情页");
  router.push({
    path: "/manage/orderlist/detail",
    query: { orderId: row.orderId }
  });
};
</script>

<style lang="scss" scoped>
.order-list-wrap {
  .order_table {
    padding: 10px 0;
    overflow: hidden;
    .table_head {
      background: #f2f6fc;
      .head_cell {
        padding: 10px 0;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .table_body {
      box-sizing: border-box;
      height: calc(100vh - 245px);
      padding: 10px 0;
      overflow: auto;
      .body_row {
        display: grid;
        grid-template-columns: repeat(100%, 3);
        gap: 1px 0;
        background: #e1e6ed;
        border: 1px solid #e1e6ed;
        margin-bottom: 10px;
        .row_title {
          display: flex;
          justify-content: space-between;
          background: #f5f7fa;
          padding: 10px 20px;
          .title_text {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 12px;
            color: #3d3d3d;
          }
        }
        .row_cell {
          display: flex;
          align-items: center;
          padding: 10px 12px;
          color: #4e5969;
          line-height: 22px;
          background: white;
          outline: 1px solid #e1e6ed;
        }
        .has_corner {
          display: block;
          padding: 0;
          .corner_tag {
            display: inline-block;
            background: #409eff;
            color: white;
            border-radius: 0px 0px 5px 0px;
            font-size: 12px;
            padding: 0 5px;
          }
        }
        .goods_cell {
          box-sizing: border-box;
          display: grid;
          grid-template-columns: 80px calc(100% - 100px);
          gap: 20px;
          padding: 10px;
          width: 100%;
          .cell_image {
            width: 80px;
            height: 80px;
            border-radius: 4px;
          }
          .cell_product {
            .product_name {
              color: #3d3d3d;
              font-weight: 700;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              line-height: 24px;
            }
            .product_info {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 12px;
              color: #86909c;
              line-height: 20px;
            }
          }
        }
        .price_cell {
          margin: 0 auto;
        }
        .operate_cell {
          display: block;
          margin: 0 auto;
        }
        .row_footer {
          color: #4e5969;
          padding: 10px 20px;
          background: white;
        }
      }
    }
  }
}
</style>
